<template>
  <!-- 供应商属性 -->
  <div>
    <el-form
      :model="formData"
      :rules="formRules"
      label-width="90px"
      label-suffix=":"
      ref="form"
    >
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item
            class="special"
            label="供应商等级"
            prop="supplierRating"
          >
            <el-select
              v-model.trim="formData.supplierRating"
              filterable
              clearable
              placeholder="请选择"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.businessLevel"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开发进度" prop="developmentStatus">
            <el-select
              v-model.trim="formData.developmentStatus"
              filterable
              clearable
              placeholder="请输入后搜索"
              size="small"
              fit-input-width
            >
              <el-option
                v-for="item in this.development"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model.trim="formData.remark"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    isNew: {
      type: Boolean,
    },
  },
  data() {
    return {
      formData: {
        id: 0,
        createBy: "",
        createTime: "2024-05-21 13:00:00",
        updateBy: "",
        updateTime: "",
        isDeleted: true,
        contactComId: this.$route.query.id,
        creditAmount: "",
        periodAmount: "",
        remark: "",
        supplierRating: "",
        developmentStatus: "",
      },
      isUpdatess: false,
      compareFormData: {},
      formRules: {
        customerLevel: [{ required: true, trigger: "blur" }],
      },
      BookingisLock: false,
      feeIsLock: false,
      businessLevel: [], //供应商等级
      development: [], //开发进度
    };
  },
  components: {},
  methods: {
    async getData() {
      //获取数据
      let res = await this.$http.get("/api/crsupplier/queryby", {
        Id: this.$route.query.id,
      });
      console.log("供应商信息", res);
      if (res.data != null && res.data.length) {
        this.formData = res.data[0];
        this.compareFormData = JSON.parse(JSON.stringify(res.data[0]));
      }

      // 获取所有字典
      let dictAll = await this.$http.get("/api/basedict/query");
      // console.log("dictAll", dictAll);
      let businessLevel = await this.$http.get("/api/basedictdetail/query", {
        DictId: dictAll.content.filter(
          (item) => item.name == "供应商等级"
        )[0].id,
        DictName: "",
        KeyWords: "",
      });
      let development = await this.$http.get("/api/basedictdetail/query", {
        DictId: dictAll.content.filter(
          (item) => item.description == "开发进度"
        )[0].id,
        DictName: "",
        KeyWords: "",
      });

      this.businessLevel = businessLevel.content;
      this.development = development.content;
    },
    resetFormData() {
      this.formData = JSON.parse(JSON.stringify(this.compareFormData))
    },
  },
  watch: {
    formData: {
      handler: function (newVal, oldVal) {
        if (this.isUpdatess) {
          this.$emit("acceptNew", newVal)
          this.$emit("supplierAttributeData", newVal);
        }
        this.isUpdatess = true
      },
      deep: true,
    },
  },
  mounted() {
    this.getData();
  },
});
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 108px !important;
}
::v-deep .el-form-item--small {
  margin-bottom: 8px;
}
</style>
